<template>
  <div class="menuList-container">


    <Menu ref="menuList" theme="dark" :style="{width:'auto'}"
          @on-select="select"
          @on-open-change="openChange"
          :active-name="activeName"
          :open-names="openNames">

      <Submenu v-for="(obj,i) in menuList" :key="obj.menuId" :name="obj.menuCode">
        <template slot="title">
          <Icon type="ios-paper"/>
          {{ obj.menuName }}
        </template>

        <MenuItem v-for="(o,j) in obj.menuList" :key="o.menuId" :name="o.menuCode" :id="o.menuCode">
          {{ o.menuName }}
        </MenuItem>

      </Submenu>

    </Menu>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "MenuList",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      menuList: [{menuId: "", menuName: "", menuIcon: "", menuCode: "", menuPid: "", menuList: [], showOrder: ""}],
      //激活菜单的 name 值
      activeName: "",
      //展开的 一级name 集合
      openNames: []
    }
  },
  //计算属性
  computed: {
    userId() {
      return this.$store.state.userId
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    //展开子节点,所有展开一级节点的数组,
    openChange(nameArr) {
      this.$store.commit('setOpenNames', nameArr);
    },
    //选中节点
    select(name) {
      this.$store.commit('setActiveName', name);
      this.bus.$emit("my-event-content", name);
    }
  },
  //钩子函数
  created() {
    this.axios.get(`/login/menu/menus/${this.userId}`)
        .then((data) => {
          this.menuList = data.data
        })
  },
  mounted() {
    this.activeName = this.$store.state.menu.activeName
    this.openNames = this.$store.state.menu.openNames

  },
  updated() {
    this.$nextTick(() => {
      this.$refs.menuList.updateOpened()
      this.$refs.menuList.updateActiveName()
      let element = document.getElementById(this.activeName);
      if(element!=null){
        element.click()
      }
    })
  }
}
</script>

<style lang="less" scoped>
.menuList-container {
  width: 100%;
  height: 100vh;
  background-color: #396c92;
}
</style>